{% extends "./base.html" %}
{% load admin_utils %}

{% block main_content %}
<div id="app-memberships-wrapper">
    当前状态：
    <span v-if="is_enabled">已开启IP限制</span>
    <span v-else>未开启IP限制</span>

    <bk-button :theme="'danger'" :title="'禁用'" @click="handleSwitch" v-if="is_enabled">
        禁用IP限制
    </bk-button>
    <bk-button :theme="'primary'" :title="'开启'" @click="handleSwitch" v-else>
        开启IP限制
    </bk-button>
    <bk-table style="margin-top: 15px;"
        :data="strategy_list">
        <bk-table-column label="IP/IP段" prop="content"></bk-table-column>
        <bk-table-column label="路径" prop="path"></bk-table-column>
        <bk-table-column label="添加原因" prop="desc"></bk-table-column>
        <bk-table-column label="过期时间" prop="expires_at"></bk-table-column>
        <bk-table-column label="添加者" prop="owner.username"></bk-table-column>
        <bk-table-column label="更新时间" prop="updated"></bk-table-column>
    </bk-table>
</div>
{% endblock %}

{% block main_script %}
<script>
    const application = {{ application | to_json }}

    const strategy_list = {{ strategy_list | to_json }}

    const is_enabled = {{ is_enabled | to_json}}

    const URLRouter = {
        list: decodeURI("{% url 'admin.applications.access_control.ip.manage' application.code %}"),
        switch: decodeURI("{% url 'admin.applications.access_control.ip.manage' application.code %}"),
    }

    document.addEventListener('DOMContentLoaded', () => {
        new Vue({
            el: "#app-memberships-wrapper",
            delimiters: ['$[', ']'],
            data: function () {
                return {
                    application,
                    loading: false,
                    loaded: false,
                    form: {
                    },
                    strategy_list,
                }
            },
            mounted: function () {
                console.log("mounted", this)
                this.fetchData()
            },
            methods: {
                fetchData: function () {
                    if (this.loading) {
                        // 报错
                        return
                    }
                    this.loading = true
                    this.loaded = false
                    this.$http.get(URLRouter.list).then(resp => {
                        this.strategy_list = resp.strategy_list
                        this.is_enabled = resp.is_enabled
                        this.loaded = true
                    }).finally(err => {
                        this.loading = false
                    })
                },
                handleSwitch: function (row) {
                    let url = URLRouter.switch
                    const h = this.$createElement

                    let operate = ''
                    if (is_enabled){
                        operate = "禁用"
                    }else{
                        operate = "开启"
                    }
                    this.$bkInfo({
                        width: 500,
                        title: `确认要【${operate}】IP限制吗？`,
                        subHeader: h('div', {
                            style: {
                                'color': 'red',
                                'text-align': 'center'
                            }
                        }, `即将${operate}应用(${application.code})的IP限制，操作后预发布环境和生产环境将立即生效，请谨慎操作！`),
                        confirmLoading: true,
                        confirmFn: async () => {
                            try {
                                await this.$http.post(url, {
                                    'is_enabled': !this.is_enabled
                                })
                                this.$bkMessage({theme: 'success', message: `应用(${application.code})的IP限制${operate}成功.`})
                                return true
                            } catch (e) {
                                this.$bkMessage({theme: 'error', message: `应用(${application.code})的IP限制${operate}失败.`})
                                return false
                            } finally {
                                await this.fetchData()
                            }
                        }
                    })
                }
            }
        })
    })
</script>
<style scoped>
    .service-logo{
        width: 35px;
        height: 35px;
        border-radius: 4px;
    }
</style>
{% endblock %}
